<template>
<div class = "whole">
    <el-header class="index-header">
        <navcon></navcon>
    </el-header>
  <div class = "content">
    <div>
      <el-aside>
      <leftnav class="showclass"></leftnav>
    </el-aside>
    </div>
    <!-- 面包屑导航 -->
    <div class="detail">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>进销记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-row>
        <el-col>
            <div>
                <el-form :inline="true" class = "user-search">
                    <el-form-item style="float: left" label="查询商品名称:">
                        <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
                    </el-form-item>  
                </el-form>
            </div>
    <!--列表-->
            <div >
                <el-table size="small" class="table" style="float: left" :data="searchUserinfo(keyUser)" border>
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="60">
                    </el-table-column>
                    
                    <el-table-column
                      label="商品编号"
                      align="center"
                      width="100">
                      <template slot-scope="scope" >
                        <span>{{ scope.row.gid}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="商品名称"
                      align="center"
                      width="100">
                      <template slot-scope="scope" >
                        <span>{{ scope.row.gname}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="品牌"
                      align="center"
                      width="100">
                      <template slot-scope="scope" >
                        <span>{{ scope.row.brand}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="商品类型"
                      align="center"
                      width="100">
                      <template slot-scope="scope" >
                        <span>{{ scope.row.type}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="销售时间"
                      align="center"
                      width="100">
                      <template slot-scope="scope">
                        <span>{{ scope.row.time }}</span>
                      </template>
                    </el-table-column>
                    
                    <el-table-column
                      label="销售数量"
                      align="center"
                      width="100">
                      <template slot-scope="scope">
                        <span>{{scope.row.saleCount }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="销售总价"
                      align="center"
                      width="130">
                      <template slot-scope="scope">
                        <span>{{ scope.row.saleAmount }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
            </div>
        </el-col>
    </el-row>
    </div>
    </div>
  </div>
</template>

<script>
import navcon from '../../components/navcon.vue'
import leftnav from '../../components/leftnav.vue' 
export default {
  // productName: 'info',
  data () {
    return {
      
      editFormVisible: false, //控制编辑页面显示与隐藏
      tableData:[],
      keyUser:""
      
    }
  },

  components: {
    navcon,
    leftnav
  }, 
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getUserInfo()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getUserInfo() {
        this.$axios.get('http://172.23.241.44:8080/admin/sale/period/list?period=year&para=1').then(res => {
          this.tableData = res.data.list
            console.log(this.tableData)
        })
    },

   
    
   
    

    

    searchUserinfo(keyUser) {
        return this.tableData.filter((user) => {
            if(user.gname.includes(keyUser)) {
                return user
            }
        })
    }
  }  
}
</script>

<style scoped>
.user-search {
  margin-top: 30px;
}
.userRole {
  width: 100%;
}
.table{
  margin-top: 20px;
  width:fit-content;
  border-width: 2px;
}

.showclass{
  height: 100%
}
.content{
  margin-left: 20px;
  display: flex;
}
.detail{
  margin-top: 30px;
}
</style>



